<template>
    <div class="layui-layout layui-layout-admin">
        <div class="layui-header">
            <div class="layui-logo">房屋租赁管理系统</div>
            <ul class="layui-nav layui-layout-right">
                <li class="layui-nav-item">
                    <a href="javascript:;">
                        <img src="http://t.cn/RCzsdCq" class="layui-nav-img">fajunjun
                    </a>
                    <dl class="layui-nav-child">
                        <dd>
                            <a href="javascript:;">基本资料</a>
                        </dd>
                        <dd>
                            <a href="javascript:;">安全设置</a>
                        </dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;" v-on:click="logoutFn()">退出</a>
                </li>
            </ul>
        </div>
        <div class="layui-side layui-bg-black">
            <div class="layui-side-scroll">
                <!-- 左侧导航区域 -->
                <ul class="layui-nav layui-nav-tree" id="sidenav" lay-filter="test">
                    <li class="layui-nav-item">
                        <router-link to="/verification">预审</router-link>
                    </li>
                    <li class="layui-nav-item layui-this">
                        <router-link to="/acceptance">受理</router-link>
                    </li>
                    <li class="layui-nav-item">
                        <router-link to="/approval">审批</router-link>
                    </li>
                    <li class="layui-nav-item">
                        <router-link to="/printing">出证</router-link>
                    </li>
                    <li class="layui-nav-item">
                        <router-link to="/end">完结</router-link>
                    </li>
                    <li class="layui-nav-item">
                        <router-link to="/list">列表</router-link>
                    </li>
                </ul>
            </div>
        </div>
        <div class="layui-body">
            <!-- 内容主体区域 -->
            <div style="padding: 15px;">
                <router-view></router-view>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "Home",
    data() {
        return {
            msg: null
        };
    },
    mounted() {
        layui.use(["element", "layer"], function() {
            var element = layui.element;
            var layer = layui.layer;
        });
    },
    methods: {
        logoutFn: function() {
            var that = this;
            layer.confirm(
                "确定退出吗？",
                {
                    btn: ["确定", "取消"],
                    offset: "100px"
                },
                function() {
                    that
                        .axios({
                            method: "post",
                            url: "logout#!method=post",
                            withCredentials: true,
                            headers: {
                                "XSRF-TOKEN": `${localStorage.getItem("token")}`
                            }
                        })
                        .then(ret => {
                            layer.closeAll();
                            that.$router.push({ name: "loginLink" });
                        })
                        .catch(err => {
                            console.log(err);
                        });
                }
            );
        }
    }
};
</script>

<style scoped>
.layui-body {
    background: #f2f2f2;
    padding: 0;
    bottom: 0;
}
</style>

